<template>
  <view>
    <fui-nav-bar isOccupy isFixed background="#0052D9" title="添加备件" color="#fff" @leftClick="leftClick" @rightClick="rightClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="task-item" @click="handleTodo" v-for="(i, index) in list" :key="index">
      <view class="task-icon">图片</view>
      <view class="task-main">
        <view class="task-content__title">
          <view>
            {{ i.name }}
          </view>
        </view>
        <view class="task-content__desc">
          <view>规格型号：{{ i.type }}</view>
        </view>
        <view class="task-content__desc">
          <view>备件编码：{{ i.code }}</view>
        </view>
        <view class="task-content__desc">
          <view>备件类型：{{ i.specifications }}</view>
        </view>
        <view class="task-content__desc">
          <view>当前库存：{{ i.count }}</view>
          <view class="stepper">
            <view v-if="i.addCount != 0" class="left" @click="clickReduce(i)">-</view>
            <view v-if="i.addCount != 0" class="count">
              {{ i.addCount }}
            </view>
            <view class="right" @click="clickAdd(i)">+</view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="cartIcon" @click="clickCart">
        <view class="cartIcon_item">
          {{ addAllCount }}
        </view>
      </view>
      <view class="cartCount">
        <view class="cartCount_1">
          <view class="cartCount_1_1">合计数量：</view>
          <view class="cartCount_1_2">
            {{ addAllCount }}
          </view>
        </view>
        <view class="cartCount_2">已选种类：3类</view>
      </view>
      <view @click="clickBtn" class="cartAdd">添加</view>
    </view>

    <view @touchmove.stop.prevent="moveStop">
      <view class="tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']">
        <view class="popupHeard">
          <view class="popupHeard_1">已选备件</view>
          <view class="popupHeard_2" @click="clickDel">
            <u-icon name="trash-fill" color="#d3d3d3" size="25"></u-icon>
            <view class="">清空</view>
          </view>
        </view>

        <scroll-view scroll-y="true" style="max-height: 56vh">
          <view class="task-item" @click="handleTodo" v-for="(i, index) in actionList" :key="index">
            <view class="task-icon">图片</view>
            <view class="task-main">
              <view class="task-content__title">
                <view>
                  {{ i.name }}
                </view>
              </view>
              <view class="task-content__desc">
                <view>规格型号：{{ i.type }}</view>
              </view>
              <view class="task-content__desc">
                <view>备件编码：{{ i.code }}</view>
              </view>
              <view class="task-content__desc">
                <view>备件类型：{{ i.specifications }}</view>
              </view>
              <view class="task-content__desc">
                <view>当前库存：{{ i.count }}</view>
                <view class="stepper">
                  <view v-if="i.addCount != 0" class="left" @click="clickReduce(i)">-</view>
                  <view v-if="i.addCount != 0" class="count">
                    {{ i.addCount }}
                  </view>
                  <view class="right" @click="clickAdd(i)">+</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="">
          <!-- <cart v-if="type=='menuList'" :cartInfo="cartInfo" :cartIndex="cartIndex"></cart> -->
          <button type="default" @click="clickTrue" style="color: #ffffff" class="btn" v-if="isCancel">确认</button>
        </view>
      </view>

      <view class="tui-actionsheet-mask" :class="[show ? 'tui-mask-show' : '']" @tap="handleClickCancel"></view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
let addAllCount = ref(0);
let show = ref(false);
let actionList = reactive([]);
const leftClick = () => {
	uni.navigateBack()
}

const list = reactive([
  {
    id: 0,
    name: '备件00100',
    type: '30*30*50',
    code: 'SB5666568',
    count: 10,
    specifications: '电梯设备备件类型11',
    addCount: 0
  },
  {
    id: 1,
    name: '备件222',
    type: '30*30*50',
    code: 'SB1234268',
    count: 20,
    specifications: '电梯设备备件类型22',
    addCount: 0
  },
  {
    id: 2,
    name: '备件33333',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 3,
    name: '备件5555',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 4,
    name: '备件6666',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  }
]);

const clickReduce = (e) => {
  e.addCount -= 1;
  addAllCount.value -= 1;
  if (e.addCount == 0) {
    actionList.map((i, index) => {
      i.id == e.id && actionList.splice(index, 1);
    });
  }
  if (addAllCount.value == 0) {
    show.value = false;
  }
};

const clickAdd = (e) => {
  e.addCount += 1;
  let have = false;
  actionList.map((i) => {
    i.id == e.id && (have = true);
  });
  if (!have) {
    actionList.push(e);
  }
  addAllCount.value += 1;
};

const clickDel = () => {
  uni.showModal({
    content: '确定清空所选备件吗？',
    confirmColor: '#0052db',
    success(res) {
      console.log(res);
      if (res.confirm) {
        actionList.map((i) => {
          i.addCount = 0;
        });
        actionList = [];
        addAllCount.value = 0;
        show.value = false;
      }
    }
  });
};

const clickBtn = () => {
  console.log('点击了添加');
};

const clickCart = () => {
  if (addAllCount.value) {
    show.value = true;
  } else {
    uni.showToast({
      icon: 'none',
      title: '未添加'
    });
  }
};

const handleClickCancel = (e) => {
  show.value = false;
};
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
.task-item {
  width: 100%;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  color: #0052db;
  .task-icon {
    width: 30%;
    background: #0052db;
    color: #fff;
    border-radius: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .task-main {
    height: 100%;
    width: 70%;
    padding-left: 20rpx;
    box-sizing: border-box;
    .task-content__title {
      width: 100%;
      height: 50%;
      font-weight: bolder;
      // font-size: 25rpx;
    }
    .task-content__desc {
      width: 100%;
      height: 50%;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      font-size: 25rpx;
      align-items: center;
      color: #909399;
    }
    .stepper {
      display: flex;
      margin-right: 10rpx;
      align-items: center;
      .left {
        margin-right: 30rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
      .count {
        margin-right: 30rpx;
      }
      .right {
        margin-right: 10rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
    }
  }
}
.footer {
  z-index: 199;
  width: 100%;
  height: 180rpx;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  border-top: 1rpx solid #d3d3d3;
  display: flex;
  align-items: center;
  .cartIcon {
    width: 100rpx;
    height: 100rpx;
    background-color: #0052db;
    margin-left: 30rpx;
    position: relative;
    .cartIcon_item {
      width: 40rpx;
      height: 40rpx;
      background-color: #ffaa00;
      line-height: 40rpx;
      text-align: center;
      position: absolute;
      right: -20rpx;
      border-radius: 30rpx;
      color: #fff;
    }
  }
  .cartCount {
    margin-left: 30rpx;
    .cartCount_1 {
      display: flex;
      align-items: center;
      .cartCount_1_2 {
        color: #ffaa00;
        font-size: 35rpx;
        margin-top: -7rpx;
      }
    }
    .cartCount_2 {
      color: #909399;
    }
  }
  .cartAdd {
    background-color: #0052db;
    padding: 20rpx 60rpx;
    border-radius: 10rpx;
    color: #fff;
    position: absolute;
    right: 30rpx;
  }
}
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  /* background: #ffffff; */
  min-height: 100rpx;
  /* border-radius: 20rpx; */
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: 200rpx;
  .popupHeard {
    display: flex;
    margin-top: 30rpx;
    border-bottom: 1rpx solid #d3d3d3;
    padding-bottom: 30rpx;
    align-items: center;
    .popupHeard_1 {
      margin-left: 30rpx;
    }
    .popupHeard_2 {
      display: flex;
      align-items: center;
      position: absolute;
      right: 30rpx;
    }
  }
}
.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 96;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.tui-mask-show {
  opacity: 1;
  visibility: visible;
}
.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
</style>
